<template>
  <div class="m-shop-state">
    <!-- 订单信息 -->
    <div class="m-order-info">
      <w-mange-title title="订单信息"></w-mange-title>
      <div>
        <div class="m-tab">
          <div class="b-info-tab">
            <div class="icon icon-all"></div>
            <div class="info">
              <div>订单总额</div>
              <div class="c-main">￥{{stateList.totalPrice || 0}}</div>
            </div>
          </div>
        </div>
        <div class="m-tab">
          <div class="b-info-tab">
            <div class="icon icon-balance"></div>
            <div class="info">
              <div>待结算金额</div>
              <div class="c-main">￥{{stateList.noPaymentPrice || 0}}</div>
            </div>
          </div>
        </div>
        <div class="m-tab">
          <div class="b-info-tab">
            <div class="icon icon-already-settled"></div>
            <div class="info">
              <div>已结算金额</div>
              <div class="c-main">￥{{stateList.paymentPrice || 0}}</div>
            </div>
          </div>
        </div>
      </div>

      <div>
        <div class="b-info">
          <div class="icon icon-order-all"></div>
          <div class="info">
            <span>全部订单</span>
            <br>
            <span class="c-main">{{countList.allOrderNum || 0}}</span>
          </div>
        </div>
        <div class="b-info">
          <div class="icon icon-pending-payment"></div>
          <div class="info">
            <span>待付款</span>
            <br>
            <span class="c-main">{{countList.loadPaymentNum || 0}}</span>
          </div>
        </div>
        <div class="b-info">
          <div class="icon icon-already-payment"></div>
          <div class="info">
            <span>已付款</span>
            <br>
            <span class="c-main">{{countList.alreadyPaymentNum || 0}}</span>
          </div>
        </div>
        <div class="b-info">
          <div class="icon icon-already-deliver"></div>
          <div class="info">
            <span>已发货</span>
            <br>
            <span class="c-main">{{countList.alreadyDeliverynum || 0}}</span>
          </div>
        </div>
        <div class="b-info">
          <div class="icon icon-pending-evaluate"></div>
          <div class="info">
            <span>待评价</span>
            <br>
            <span class="c-main">{{countList.loadExaluteNum || 0}}</span>
          </div>
        </div>
        <div class="b-info">
          <div class="icon icon-already-evaluate"></div>
          <div class="info">
            <span>已评价</span>
            <br>
            <span class="c-main">{{countList.alreadyExaluteNum || 0}}</span>
          </div>
        </div>
        <div class="b-info">
          <div class="icon icon-already-success"></div>
          <div class="info">
            <span>已完成</span>
            <br>
            <span class="c-main">{{countList.alreadyFinishNum || 0}}</span>
          </div>
        </div>
        <div class="b-info">
          <div class="icon icon-already-fail"></div>
          <div class="info">
            <span>已取消</span>
            <br>
            <span class="c-main">{{countList.alreadyCancelNum || 0}}</span>
          </div>
        </div>
        <div class="b-info">
          <div class="icon icon-pending-refund"></div>
          <div class="info">
            <span>退款中</span>
            <br>
            <span class="c-main">{{countList.loadRefundNum || 0}}</span>
          </div>
        </div>
        <div class="b-info">
          <div class="icon icon-already-refund"></div>
          <div class="info">
            <span>已退款</span>
            <br>
            <span class="c-main">{{countList.alreadyRefundNum || 0}}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="m-goods-info">
      <w-mange-title title="商品信息"></w-mange-title>
      <div>
        <div class="b-info goods-info">
          <div class="icon icon-goods icon-goods-all"></div>
          <div class="info goods-state">
            <span>全部商品</span>
            <br>
            <span class="c-main">{{goodsStatus.all}}</span>
          </div>
        </div>
        <div class="b-info goods-info">
          <div class="icon icon-goods icon-goods-sell"></div>
          <div class="info goods-state">
            <span>出售中商品</span>
            <br>
            <span class="c-main">{{goodsStatus.chuShou}}</span>
          </div>
        </div>
        <div class="b-info goods-info">
          <div class="icon icon-goods icon-goods-socket"></div>
          <div class="info goods-state">
            <span>仓库中的商品</span>
            <br>
            <span class="c-main">{{goodsStatus.cangKu}}</span>
          </div>
        </div>
        <!-- <div class="b-info goods-info">
          <div class="icon icon-goods icon-goods-illegal"></div>
          <div class="info goods-state">
            <span>违规下架商品</span>
            <br>
            <span class="c-main">{{goodsStatus.chuShou}}</span>
          </div>
        </div> -->
        <div class="b-info goods-info">
          <div class="icon icon-goods icon-goods-draf"></div>
          <div class="info goods-state">
            <span>草稿箱商品</span>
            <br>
            <span class="c-main">{{goodsStatus.caoGao}}</span>
          </div>
        </div>
        <div class="b-info goods-info">
          <div class="icon icon-goods icon-goods-audited"></div>
          <div class="info goods-state">
            <span>审核中商品</span>
            <br>
            <span class="c-main">{{goodsStatus.daiShenHe}}</span>
          </div>
        </div>
        <div class="b-info goods-info">
          <div class="icon icon-goods icon-goods-review"></div>
          <div class="info goods-state">
            <span>审核不通过商品</span>
            <br>
            <span class="c-main">{{goodsStatus.fail}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiShopMange, apiOrderMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      stateList: {},
      goodsStatus: {},
      countList: {}
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    const token = this.token || ''
    const three = this.$route.query.three || ''
    if (this.$route.query.storeid) {
      // 结算金
      apiShopMange.apiShopStatus(token, three, this.$route.query.storeid).then(data => {
        this.stateList = data.data || {}
      })
      // 各状态下的商品数量
      apiShopMange.apiShopStatusGoodsCount(token, three, this.$route.query.storeid).then(data => {
        this.goodsStatus = data.data || {}
      })
      // 各订单状态的数量
      apiOrderMange.apiOrderCount(token, this.$route.query.three, this.$route.query.storeid).then(data => {
        this.countList = data.data.bean || {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.m-shop-state {
  .icon {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    top: 16px;
    margin: 0 auto;
    left: 0;
    right: 0;
  }
  .icon-goods {
    top: 20px;
  }
  .m-tab {
    position: relative;
    min-width: 90px;
    height: 90px;
    display: inline-block;
    padding: 50px;
    border: 1px solid $border-gray-light;
    margin: 0 12px 14px;
  }
  .b-info-tab {
    // position: relative;
    font-size: 12px;
    // min-width: 90px;
    // height: 90px;
    display: inline-block;
    text-align: center;
  }
  .b-info {
    position: relative;
    font-size: 12px;
    min-width: 90px;
    height: 90px;
    display: inline-block;
    text-align: center;
    border: 1px solid $border-gray-light;
    margin: 0 12px 14px;
  }
  .goods-info {
    width: 100px;
    height: 100px;
  }
  .info {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 18px;
  }
  .goods-state {
    bottom: 18px;
  }
  .icon-all {
    background-image: url('../../assets/shopIcon/dingdanzhonge.png')
  }
  .icon-balance {
    background-image: url('../../assets/shopIcon/daijiesuan.png')
  }
  .icon-already-settled {
    background-image: url('../../assets/shopIcon/yijiesuanjine.png')
  }
  .icon-order-all {
    background-image: url('../../assets/shopIcon/quanbudingdan.png')
  }
  .icon-pending-payment {
    background-image: url('../../assets/shopIcon/daifukuan.png')
  }
  .icon-already-payment {
    background-image: url('../../assets/shopIcon/yifukuan.png')
  }
  .icon-already-deliver {
    background-image: url('../../assets/shopIcon/yifahuo.png')
  }
  .icon-pending-evaluate {
    background-image: url('../../assets/shopIcon/daipingjia.png')
  }
  .icon-already-evaluate {
    background-image: url('../../assets/shopIcon/yipingjia.png')
  }
  .icon-already-success {
    background-image: url('../../assets/shopIcon/yiwancheng.png')
  }
  .icon-already-fail {
    background-image: url('../../assets/shopIcon/yiquxiao.png')
  }
  .icon-pending-refund {
    background-image: url('../../assets/shopIcon/tuikuanzhong.png')
  }
  .icon-already-refund {
    background-image: url('../../assets/shopIcon/yituikuan.png')
  }
  .icon-goods-all {
    background-image: url('../../assets/shopIcon/quanbushangpin.png')
  }
  .icon-goods-sell {
    background-image: url('../../assets/shopIcon/chushouzhongdeshangpin.png')
  }
  .icon-goods-socket {
    background-image: url('../../assets/shopIcon/cangkuzhongshangpin.png')
  }
  .icon-goods-illegal {
    background-image: url('../../assets/shopIcon/weiguanxiajiashangpin.png')
  }
  .icon-goods-draf {
    background-image: url('../../assets/shopIcon/caogaoxiangshangpin.png')
  }
  .icon-goods-audited {
    background-image: url('../../assets/shopIcon/shenhezhongdeshangpin.png')
  }
  .icon-goods-review {
    background-image: url('../../assets/shopIcon/shenhebutongguodeshangpin.png')
  }
}
</style>
